﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Thksoft.Login" %>

<!DOCTYPE html>
<html>

<head>
    <title>登录</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        html {
            min-width: 1180px;
            min-height: 740px;
        }

        body {
            position: relative;
        }

        .Login-Bg {
            width: 100%;
            height: 100%;
            background-image: url('/Images/login/软件管理.lnk-1.png');
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            width: 100vw;
            height: 100vh;
        }

        .Login-Panle {
            position: absolute;
            top: 32.1%;
            left: 60.7%;
            width: 29.5%;
            height: 52.6%;
            /*border:1px solid red;*/
        }

        .Login-Account {
            width: 100%;
            background-color: rgb(3,98,158);
            height: 50px;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .Login-Icon {
            float: left;
            height: 28px;
            width: 25px;
            margin-left: 15px;
            margin-top: 13px;
            position: relative;
        }

        .Login-Input-M {
            position: absolute;
            left: 50px;
            right: 5px;
        }

        .Login-Input {
            width: 100%;
            border: none;
            height: 28px;
            margin-top: 14px;
            background-color: transparent;
            font-size: 20px;
            font-family: PingFangSC-Semibold, sans-serif;
            color: rgb(183,201,219);
            outline: none;
        }
            /*去掉Coogle历史 黄色背景*/
            .Login-Input:-webkit-autofill {
                transition: 5000s ease-in-out 0s;
            }

            .Login-Input::-webkit-input-placeholder {
                color: rgb(183,201,219);
                opacity: 0.8;
                font-size: 18px;
            }

            .Login-Input:-moz-placeholder {
                color: rgb(183,201,219);
                opacity: 0.8;
                font-size: 18px;
            }

            .Login-Input::-moz-placeholder {
                color: rgb(183,201,219);
                opacity: 0.8;
                font-size: 18px;
            }

            .Login-Input:-ms-input-placeholder {
                color: rgb(183,201,219);
                opacity: 0.8;
                font-size: 18px;
            }

        .Login-Btn {
            color: white;
            border: none;
            background-color: rgb(11,155,247);
            font-size: 24px;
            font-family: PingFangSC-Semibold, sans-serif;
            outline: none;
            letter-spacing: 50px;
            text-align: center;
            margin: 0;
            padding: 0;
            text-indent: 50px;
            cursor: pointer;
        }

            .Login-Btn:hover {
                opacity: 0.8;
            }

        .Login-Lodding {
            background-image: url('/Content/images/loading1.gif');
            background-size: 100% 100%;
            height: 25px;
            width: 25px;
        }
    </style>
</head>

<body>
    <div class="Login-Bg" onkeydown="if(event.keyCode==13){document.getElementById('Login').click();}">
        <div class="Login-Panle">
            <div style="position: absolute; top: 25.7%; left: 8.8%; right: 8.8%;">
                <div class="Login-Account">
                    <div class="Login-Icon" style="background-image: url('/Images/login/素彩网www.sc115.com 229.png'); background-size: 100% 100%;"></div>
                    <div class="Login-Input-M">
                        <input id="UserName" placeholder="登录名" type="text" class="Login-Input">
                    </div>
                </div>
                <div class="Login-Account">
                    <div class="Login-Icon" style="background-image: url('/Images/login/素彩网www.sc115.com 063.png'); background-size: 100% 100%;"></div>
                    <div class="Login-Input-M">
                        <input id="PassWord" placeholder="密码" type="password" class="Login-Input">
                    </div>
                </div>
                <div class="Login-Account" style="background-color: inherit; color: rgb(183,201,219);">
                    <input id="IfCheck" type="checkbox" style="margin-right: 10px; float: left;" />
                    <div style="float: left; font-family: PingFangSC-Semibold, sans-serif;">记住密码</div>
                </div>
                <button class="Login-Account Login-Btn" id="Login" style="text-align: center;">
                    登陆
                </button>
                <div id="Login-Lodding" class="Login-Account" style="background-color: transparent; margin-top: -55px; z-index: 20; opacity: 0.8; display: none; height: 50px;">
                    <div style="margin-top: 15px; text-align: center;">
                        <div class="Login-Lodding" style="margin-right: 10px; display: inline-block;"></div>
                        <div style="height: 25px; display: inline-block;">
                            <div style="position: relative; top: -5px;">验证中...</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/Scripts/jquery.1.11.1.js"></script>
    <script type="text/javascript">

        $("#UserName").focus();

        //加载记住的登录名和密码
        $.post("/Login.aspx?parms=GetCheckLoginInfo", function (result) {
            if (result.Type == 1) {
                $("#UserName").val(result.Data.UserName);
                $("#PassWord").val(result.Data.PassWord);
                $("#IfCheck").attr("checked", "checked");
            }
        });
        $("#Login").click(function () {
            $("#Login").attr({ "disabled": "disabled" });
            $("#Login-Lodding").show();
            $("#Login-Lodding").html("<div style=\"margin-top:15px;text-align:center; \"><div class=\"Login-Lodding\" style = \"margin-right:10px;display:inline-block;\" ></div> <div style=\"height:25px;display:inline-block;\"><div style=\" position:relative;top:-5px;\">验证中...</div></div></div >");
            var userName = $("#UserName").val().trim();
            var passWord = $("#PassWord").val().trim();
            var ifCheck = $("#IfCheck").is(":checked");
            $("#Login").text("");
            var start = new Date();
            $.ajax({
                url: "/Login.aspx?parms=CheckLogin",
                type: "POST",
                data: JSON.stringify({ UserName: userName, PassWord: passWord, IfCheck: ifCheck }),
                success: function (result) {
                    var end = new Date();
                    if (result.Type == 1) {
                        setTimeout(function () {
                            $("#Login-Lodding").html("<div style=\"text-align:center;margin-top:15px;color:blue;\">验证成功!</div>");
                            setTimeout(function () {
                                //location.href = "/MainAspx/MainFrame.aspx";
                                //location.href = "/App_themes/layui/index.html";
                                location.href = "/App_themes/Hout/index.html";
                            }, 0);
                        }, GetRandom(end - start));
                        return;
                    }
                    setTimeout(function () {
                        $("#Login-Lodding").html("<div style=\"text-align:center;margin-top:15px;color:yellow;\">" + result.Msg + "</div>");
                        setTimeout(function () {
                            $("#Login").removeAttr("disabled");
                            $("#Login").text("登陆");
                            $("#Login-Lodding").hide();
                        }, 1000);
                    }, GetRandom(end - start));
                    /**
                     * 获取延迟时间(毫秒)
                     * @parms num 偏移时间(毫秒)
                     * @returns 延迟时间(毫秒)
                     */
                    function GetRandom(num) {
                        if (num > 2000) {
                            return 0;
                        }
                        while (true) {
                            var number = Math.ceil(Math.random() * 2000);
                            if (number >= (1000 - num)) {
                                console.log("延迟时间：" + number);
                                return number;
                            }
                        }
                    }
                },
                error: function () {
                    setTimeout(function () {
                        $("#Login-Lodding").html("<div style=\"text-align:center;margin-top:15px;color:yellow;\">网络或者服务接口异常</div>");
                        setTimeout(function () {
                            $("#Login").removeAttr("disabled");
                            $("#Login").text("登陆");
                            $("#Login-Lodding").hide();
                        }, 1000);
                    }, GetRandom(end - start));
                    /**
                     * 获取延迟时间(毫秒)
                     * @parms num 偏移时间(毫秒)
                     * @returns 延迟时间(毫秒)
                     */
                    function GetRandom(num) {
                        if (num > 2000) {
                            return 0;
                        }
                        while (true) {
                            var number = Math.ceil(Math.random() * 2000);
                            if (number >= (1000 - num)) {
                                console.log("延迟时间：" + number);
                                return number;
                            }
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>